<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

	<ui:define name="body">

		<rich:messages styleClass="message" />

		<h:form id="clienteForm">

			<rich:panel>

				<f:facet name="header">Cliente</f:facet>
				<rich:panel>
					<s:decorate id="nameDecoration" template="layout/edit.xhtml">
						<ui:define name="label">Nome</ui:define>
						<h:inputText id="name" required="true"
							value="#{clienteHome.instance.nome}" />
					</s:decorate>

					<s:decorate id="dataNascimentoDecoration"
						template="layout/edit.xhtml">
						<ui:define name="label">Data de Nascimento</ui:define>
						<a4j:outputPanel id="calendar" layout="block">
							<rich:calendar value="#{clienteHome.instance.dataNascimento}"
								popup="true" datePattern="dd/MM/yyyy" showApplyButton="false"
								cellWidth="24px" cellHeight="22px" style="width:200px" />
						</a4j:outputPanel>
					</s:decorate>



					<div style="clear: both" />



					<h:panelGrid columns="1">

						<s:decorate template="layout/edit.xhtml">
							<ui:define name="label">Rua</ui:define>
							<h:inputText required="true"
								value="#{clienteHome.instance.endereco.rua}" />
						</s:decorate>


						<s:decorate template="layout/edit.xhtml">
							<ui:define name="label">Bairro</ui:define>
							<h:inputText required="true"
								value="#{clienteHome.instance.endereco.bairro}" />
						</s:decorate>

						<s:decorate template="layout/edit.xhtml">
							<ui:define name="label">Cep</ui:define>
							<h:inputText required="true"
								value="#{clienteHome.instance.endereco.cep}" />
						</s:decorate>

						<s:decorate template="layout/edit.xhtml">
							<ui:define name="label">Cidade</ui:define>
							<h:inputText required="true"
								value="#{clienteHome.instance.endereco.cidade}" />
						</s:decorate>

					</h:panelGrid>

				</rich:panel>

				<rich:spacer height="20" />
				<rich:panel>
					<f:facet name="header">Telefone</f:facet>

					<a4j:region>
						<h:panelGrid columns="3" id="panelTelefone">
							<h:outputText value="Numero" />
							<h:outputText value="DDD" />
							<h:outputText value="Tipo" />
							<h:inputText value="#{clienteHome.telefone.numero}" />
							<h:inputText value="#{clienteHome.telefone.ddd}" />
							<h:selectOneMenu value="#{clienteHome.telefone.tipoTelefone}">
								<s:selectItems var="tipo" label="#{tipo.descricao}"
									value="#{tipos}"></s:selectItems>
								<s:convertEnum></s:convertEnum>
							</h:selectOneMenu>

						</h:panelGrid>
						<rich:spacer height="12" />
						<a4j:commandButton action="#{clienteHome.saveTelefone}"
							value="Salvar" reRender="tabelaTelefones,panelTelefone" />

						<rich:dataTable id="tabelaTelefones"
							value="#{clienteHome.instance.telefones}" var="tel">
							<rich:column>
								<f:facet name="header">Numero</f:facet>
								<h:outputText value="#{tel.numero}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">DDD</f:facet>
								<h:outputText value="#{tel.ddd}" />
							</rich:column>
							<rich:column>
								<f:facet name="header">Tipo</f:facet>
								<h:outputText value="#{tel.tipoTelefone}" />
							</rich:column>
							<rich:column width="50px" styleClass="centralizado">
								<f:facet name="header">Alterar</f:facet>
								<a4j:commandLink action="#{clienteHome.atualizaTelefone(tel)}"
									reRender="panelTelefone">
									<h:graphicImage styleClass="semBorda" value="/img/open.gif" />
								</a4j:commandLink>
							</rich:column>
							<rich:column width="50px" styleClass="centralizado">
								<f:facet name="header">Remover</f:facet>
								<h:commandLink action="#{clienteHome.removerTelefone(tel)}"
									immediate="true">
									<h:graphicImage styleClass="semBorda" value="/img/error.gif" />
								</h:commandLink>
							</rich:column>

						</rich:dataTable>
					</a4j:region>
				</rich:panel>



				<rich:spacer height="20" />

			<rich:panel>
				
				<f:facet name="header"> Cartao</f:facet>

				<a4j:region>
					<h:panelGrid columns="2" id="panelCartao">
						<h:outputText value="Numero" />
						<h:outputText value="Tipo" />
						<h:inputText value="#{clienteHome.cartao.numero}" />
						<h:selectOneMenu value="#{clienteHome.cartao.tipoCartao}">
							<s:selectItems var="tipo" label="#{tipo.descricao}"
								value="#{tiposCartao}"></s:selectItems>
							<s:convertEnum></s:convertEnum>
						</h:selectOneMenu>

					</h:panelGrid>
					<rich:spacer height="12" />
					<a4j:commandButton action="#{clienteHome.saveCartao}"
						value="Salvar" reRender="tabelaCartoes,panelCartoes" />

					<rich:dataTable id="tabelaCartoes"
						value="#{clienteHome.instance.cartao}" var="card">
						<rich:column>
							<f:facet name="header">Numero</f:facet>
							<h:outputText value="#{card.numero}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Tipo</f:facet>
							<h:outputText value="#{card.tipoCartao}" />
						</rich:column>
						<rich:column width="50px" styleClass="centralizado">
								<f:facet name="header">Alterar</f:facet>
								<a4j:commandLink action="#{clienteHome.atualizaCartao(card)}"
									reRender="panelTelefone">
									<h:graphicImage styleClass="semBorda" value="/img/open.gif" />
								</a4j:commandLink>
							</rich:column>
							<rich:column width="50px" styleClass="centralizado">
								<f:facet name="header">Remover</f:facet>
								<h:commandLink action="#{clienteHome.removerCartao(card)}"
									immediate="true">
									<h:graphicImage styleClass="semBorda" value="/img/error.gif" />
								</h:commandLink>
							</rich:column>
					</rich:dataTable>
				</a4j:region>
		
		</rich:panel>


			</rich:panel>

			<!-- Panel de Acoes :: Persistencia de Cliente -->
	        <h:panelGrid columns="4">
				<h:commandButton id="save"
					value="Salvar" action="#{clienteHome.persist}"
					rendered="#{!clienteHome.managed}" /> 
				<h:commandButton id="update"
					value="Atualizar" action="#{clienteHome.update}"
					rendered="#{clienteHome.managed}" />
				<h:commandButton id="delete"
					value="Excluir" action="#{clienteHome.remove}" immediate="true"
					rendered="#{clienteHome.managed}" />
					|
				<h:commandLink id="done" value="Voltar" action="/clienteList.xhtml" />
			</h:panelGrid>
			<br/>


		</h:form>

	</ui:define>

</ui:composition>